<template>
	<view class="">
		<view class="jui_flex jui_flex_items_center jui_mar_2432">
			<view class="line"></view>
			<view class="jui_fc_333 jui_fs32 jui_mar_l20">
				团队数据
			</view>

		</view>
		<view class="jui_mar_2432 jui_flex" style="flex-wrap: wrap;">
			<view class="team  jui_bg_fff jui_bor_rad_30 jui_mar_r20 jui_mar_b20">
				<view class=" ">
					直属人数
				</view>
				<view class="jui_mar_t20 jui_font_w600 jui_fs34">
					{{info.zhituiCount || 0}}
				</view>
			</view>
			<view class="team  jui_bg_fff jui_bor_rad_30 jui_mar_r20 jui_mar_b20">
				<view class=" ">
					间属人数
				</view>
				<view class="jui_mar_t20 jui_font_w600 jui_fs34">
					{{info.teamCount || 0}}
				</view>
			</view>
			
			<view class="team  jui_bg_fff jui_bor_rad_30 jui_mar_b20 ">
				<view class=" ">
					团队业绩
				</view>
				<view class="jui_mar_t20 jui_font_w600 jui_fs34">
					{{info.teamMoney || 0}}
				</view>
			</view>
			<!-- <view class="team  jui_bg_fff jui_bor_rad_30 jui_mar_r20">
				<view class=" ">
					小区业绩
				</view>
				<view class="jui_mar_t20 jui_font_w600 jui_fs34">
					{{info.minVillage || 5}}
				</view>
			</view>
			<view class="team  jui_bg_fff jui_bor_rad_30">
				<view class=" ">
					大区业绩
				</view>
				<view class="jui_mar_t20 jui_font_w600 jui_fs34">
					{{info.maxVillage || 5}}
				</view>
			</view> -->
		</view>
		<view class="jui_flex jui_flex_items_center jui_mar_2432">
			<view class="line"></view>
			<view class="jui_fc_333 jui_fs32 jui_mar_l20">
				直属成员
			</view>
		</view>
		<view class="con">
			<view class="list jui_flex jui_flex_justify_between" v-for="(item, index) in list" :key="index">
				<view class="left jui_flex jui_flex_items_center">
					<!-- <image :src="item.picture_image"  style="height: 88rpx;width: 88rpx;" mode=""></image> -->
					<view class="jui_mar_l20">
						<view class="text" style="color: #333;">
							{{item.name}} <!-- <text class="jui_mar_l20">{{item.nickname}}</text> -->
						</view>
						<!-- <view class="text" style="color: #666;font-size: 28upx;margin-top: 10upx;">
							{{item.mobile}}
						</view> -->
					</view>

				</view>
				<view class="right">
				<!-- 	<view class="text" style="color: #333;">
						团队业绩
					</view> -->
					<view class="text" style="color: #666;font-size: 28upx;margin-top: 10upx;">
						{{item.mobile}}
					</view>
				</view>
			</view>
			<empty position="jui_static" v-if="list.length < 1"></empty>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				layer: 1,
				data: {},
				info: {},
				q: {
					tier: 1,
					page: 1,
					page_num: 20
				},
				isLoading: true,
				hasMore: true,
				loadStatus: '',
				list: []
			}
		},
		onLoad() {
			this.init();
			this.getList();
		},
		onReachBottom() {
			if (this.hasMore) {
				this.q.page += 1;
				this.getList();
			}
		},
		methods: {
			init(type) {
				this.$api.myMoneyGet().then(res => {
					if (res.code == 1) {
						this.data = res.data
					}
				})
				let _token = uni.getStorageSync('token');
				let params = {
					_token: _token
				}
				this.$api.myTeam(params).then(res => {
					if (res.ok) {
						this.info = res.data[0];
					}
				});
			},
			changeLevel(index) {
				this.layer = index;
			},
			getList() {
				this.isLoading = true;
				let _token = uni.getStorageSync('token');
				this.q._token = _token
				this.$api.myTeamGet(this.q).then(res => {
					this.isLoading = false;
					this.list = res.data;
					if (res.data.length != 0) {
						this.hasMore = true;
						this.loadStatus = '';
					} else {
						this.hasMore = false;
						this.loadStatus = 'over';
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.shouyi {
		width: 48%;
		/* height: 190rpx; */
		text-align: center;
		padding: 50rpx 0;
	}

	.team {
		width: 31%;
		/* height: 190rpx; */
		text-align: center;
		padding: 50rpx 0;
	}

	.on {
		color: #318BF2;
		font-size: 36rpx !important;
	}

	.con {
		background-color: #FFFFFF;
		border-top-left-radius: 30rpx !important;
		border-top-right-radius: 30rpx !important;
		// padding: 30rpx ;
		/* position: absolute; */
		/* top: 500rpx; */
		width: 100%;
		margin-top: 36upx;
		margin: 0 auto;

		.list {
			// width: 100%;
			// margin-bottom: 30upx;
			background: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			padding: 30upx 40rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f4f4f4;

			image {
				width: 100upx;
				height: 100upx;
				border-radius: 100%;
			}

			.right {
				text-align: right;
				font-size: 32upx;
				color: #333;
				margin-left: 30upx;

				text {
					color: $zhuse;
				}
			}
		}
	}
</style>
